<template>
    <div>
        <div class="loading" v-if="loading" v-loading="loading"></div>
        <div v-if="!loading">
            <div class="page-header">
                <CustomTitle :title="data.warrantyName" />
                <el-button type="primary" plain @click="router.back()">返回</el-button>
            </div>
            <div class="content" v-html="data.warrantyContent"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import CustomTitle from "@/components/CustomTitle";
import { useRouter, useRoute } from "vue-router";
import { getTempDetail } from "@/apis/stencil/warranty";

const router = useRouter();
const route = useRoute();
const loading = ref(false)
const data = ref({
    warrantyContent: ''
});
const getContent = async () => {
    const res = await getTempDetail({ warrantyId: route.query.warrantyId });
    const warrantyContent=res.data.warrantyContent.replace('<img','<img style="max-width:100%"')
    data.value = {...res.data,warrantyContent};
    loading.value = false;
}
onMounted(() => {
    loading.value = true;
    getContent()
})
</script>

<style lang="scss" scoped>
@import 'index'
</style>